<template>
  <div class="bigbox" >
    <div class="box" >
      <div class="onebox">
        <img
          src="../../assets/leftmiddle/1.png"
          alt=""
        />
      </div>
      <div class="text" >
        <span class="span1">河道</span>
        <span class="span2">{{tablelist.list.hdCnt}}条/{{tablelist.list.hdLength}}km</span>
      </div>
    </div>
    <div class="box" >
      <div class="onebox">
        <img
          src="../../assets/leftmiddle/2.png"
          alt=""
        />
      </div>
      <div class="text" >
        <span class="span1">暗涵</span>
        <span class="span2">{{tablelist.list.ahCnt}}条/{{tablelist.list.ahLength}}km</span>
      </div>
    </div>
    <div class="box" >
      <div class="onebox">
        <img
          src="../../assets/leftmiddle/3.png"
          alt=""
        />
      </div>
      <div class="text" >
        <span class="span1">断头涌</span>
        <span class="span2">{{tablelist.list.dtcCnt}}条/{{tablelist.list.dtcLength}}km</span>
      </div>
    </div>
    <div class="box" >
      <div class="onebox">
        <img
          src="../../assets/leftmiddle/4.png"
          alt=""
        />
      </div>
      <div class="text" >
        <span class="span1">黑臭水体</span>
        <span class="span2">{{tablelist.list.hcstCnt}}条/{{tablelist.list.hcstLength}}km</span>
      </div>
    </div>
    <div class="box" >
      <div class="onebox">
        <img
          src="../../assets/leftmiddle/5.png"
          alt=""
        />
      </div>
      <div class="text" >
        <span class="span1">小湖塘库</span>
        <span class="span2">{{tablelist.list.xhtcCnt}}条/{{tablelist.list.xhtcArea}}㎡</span>
      </div>
    </div>
    </div>
    
</template>

<script setup>
import { getStatistics } from "@/api/home/index";
import { onMounted,reactive } from "vue";
let tablelist = reactive({
  arr: [],
  list: ""
 });

onMounted(() => {
  getStatistics()
    .then((res) => {
      // console.log(res.data, "河道排查数据");
      tablelist.list=res.data
      //  console.log( tablelist.list.hdLength,'5558sad');
    })
    .catch((err) => {
      console.log(err);
    });
});
</script>

<style scoped>
.box {
  width: 48%;
  height: 60px;
  /* background-color: rgba(69, 157, 121, 0.625); */
  display: flex;
  border-left: 3px solid #1a544e;
  margin-left: 5px;
  opacity: 0.8;
  margin-top: 30px;
  padding:8px 0 0 0px;
  box-sizing: border-box;
  background: linear-gradient(to right, #17413854, #495051);
}
img{
  width: 40px;
}
.text {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.span1 {
  color: #74fee0a9;
  font-weight: 700;
  font-size: 15px;
}
.bigbox {
    display: flex;
    flex-wrap: wrap;
    }
.span2 {
  color: white;
  font-size: 13px;
  /* margin-top: 2px; */
  /* font-weight: 700; */
}
</style>